
let option = {
    color: ['#80FFA5', '#FFBF00'],
    // color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
    // title: {
    //     text: ''
    // },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    // legend: {
    //     data: ['上行', '下行']
    // },
    // toolbox: {
    //     feature: {
    //         saveAsImage: {}
    //     }
    // },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: []
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '上传',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgb(128, 255, 165)'
                    },
                    {
                        offset: 1,
                        color: 'rgb(1, 191, 236)'
                    }
                ])
            },
            emphasis: {
                focus: 'series'
            },
            data: []
        },
        {
            name: '接收',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
                width: 0
            },
            showSymbol: false,
            areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                        offset: 0,
                        color: 'rgb(255, 191, 0)'
                    },
                    {
                        offset: 1,
                        color: 'rgb(224, 62, 76)'
                    }
                ])
            },
            emphasis: {
                focus: 'series'
            },
            data: []
        },
    ]
};

var myChart = echarts.init(document.getElementById('echarts'));

// setInterval(() => {

//     let num = Math.floor(Math.random() * 1000)

//     var d = new Date();

//     option.series[0].data.push(num)

//     option.xAxis[0].data.push(d.getMinutes() + ':' + d.getSeconds())

//     if (option.series[0].data.length > 60) {
//         option.series[0].data.splice(0, 1)
//     }
//     if (option.xAxis[0].data.length > 60) {
//         option.xAxis[0].data.splice(0, 1)
//     }

    // myChart.setOption(option);
// }, 1000)


myChart.setOption(option);


ipcRenderer.on('echarts', (e, data) => {

    var d = new Date();

    option.series[0].data.push(data.top)
    option.series[1].data.push(data.bottom)

    option.xAxis[0].data.push(d.getMinutes() + ':' + d.getSeconds())

    if (option.series[0].data.length > 60) {
        option.series[0].data.splice(0, 1)
    }
    if (option.series[1].data.length > 60) {
        option.series[1].data.splice(0, 1)
    }
    
    if (option.xAxis[0].data.length > 60) {
        option.xAxis[0].data.splice(0, 1)
    }

    myChart.setOption(option);
})